<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>井字棋游戏</title>
<style>
  table {
    border-collapse: collapse;
  }
  td {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
  }
  .x {
    color: blue;
  }
  .o {
    color: red;
  }
</style>
</head>
<body>

<table id="ticTacToe">
  <!-- 棋盘格子将在这里动态生成 -->
</table>

<button onclick="resetGame()">重置游戏</button>

<script>
// JavaScript 代码将放在这里
</script>

</body>
</html>

<script>
    // 初始化棋盘和角色
    const boardSize = 3;
    let board = new Array(boardSize).fill(null).map(() => new Array(boardSize).fill(null));
    let currentPlayer = 'x'; // 当前玩家，'x' 或 'o'
    let playerMoves = { x: [], o: [] }; // 保存每个玩家的每一步位置

    // 渲染棋盘到HTML页面
    function renderBoard() {
        const table = document.getElementById('ticTacToe');
        table.innerHTML = ''; // 清空之前的棋盘内容
        for (let i = 0; i < boardSize; i++) {
            const row = document.createElement('tr');
            for (let j = 0; j < boardSize; j++) {
                const cell = document.createElement('td');
                cell.textContent = board[i][j] || '';
                cell.addEventListener('click', () => handleCellClick(i, j));
                row.appendChild(cell);
            }
            table.appendChild(row);
        }
    }

    // 处理单元格点击事件
    function handleCellClick(row, col) {
        if (board[row][col] !== null) return; // 如果单元格已被占用，则不处理

        board[row][col] = currentPlayer; // 在棋盘上放置当前玩家的棋子
        playerMoves[currentPlayer].push({ row, col }); // 保存当前玩家的这一步位置

        if (playerMoves[currentPlayer].length > 3) {
            // 如果当前玩家步数大于3，清除第一步
            const firstMove = playerMoves[currentPlayer][0];
            board[firstMove.row][firstMove.col] = null; // 清除棋盘上的棋子
            playerMoves[currentPlayer].shift(); // 从步数数组中移除第一步
        }

        renderBoard(); // 重新渲染棋盘

        // 检查是否有玩家获胜（这里省略了获胜逻辑的实现）
        // ...

        // 切换当前玩家
        currentPlayer = currentPlayer === 'x' ? 'o' : 'x';
    }

    // 重置游戏
    function resetGame() {
        board = new Array(boardSize).fill(null).map(() => new Array(boardSize).fill(null));
        currentPlayer = 'x';
        playerMoves = { x: [], o: [] };
        renderBoard();
    }

    // 初始化游戏
    renderBoard();

</script>